<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <ul>
        <li><router-link to="/user/100">用户100</router-link></li>
        <li><router-link to="/user/100/profile">用户100 profile</router-link></li>
        <li><router-link to="/user/100/posts">用户100 posts</router-link></li>
    </ul>
   <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//router-view是最顶层的出口，渲染最高级的路由匹配的组件
//一个被 渲染的组件同样可以包含自己的嵌套的router-view
//定义User组件
const User  = {
    template:`
    <div>
       <p>User {{$route.params.user_id}}</p>
       <router-view></router-view>
    </div>
    `
}
const UserHome = {
    template:`<div>UserHome</div>`
}
const Profile = {
    template:`<div>Profile</div>`
}
const Posts = {
    template:`<div>Posts</div>`
}
//定义路由配置数组
const routes = [
    {
        path:'/user/:user_id',//父路径
        component:User,
        children:[
            //如果路径匹配/user/:user_id/profile的话，
            //就会把Profile组件渲染到User组件里的router-view中
            {path:'',component:UserHome},
            {path:'/user/:user_id/profile',component:Profile},//子路径
            {path:'posts',component:Posts}
        ]
    }
]
//创建路由实例
var router = new VueRouter({
    routes
});
var vm = new Vue({
    el:'#app',
    router
});
</script>
</body>
</html>